import { useEffect, useState } from 'react'
import logo from './logo.svg'
import './App.css'
import { connect } from 'react-redux'
import {Top,Tab,TabItem} from './style'
import RouterConfig from './routes'
import {useNavigate,NavLink} from 'react-router-dom'
function App(props) {
  const navigate = useNavigate()   
  // 有了redux 之后 页面组件不再做数据管理
  // useEffect(()=>{
  //   fetch("http://localhost:3000/personalized")
  //   .then(data=>data.json())
  //   .then(data=>{
  //     console.log(data);
  //   })
  // })
  return (
    <div className="App">
      <Top>
        <span
          className="iconfont menu"
          onClick={() => alert("用户中心正在开发中，敬请期待:)")}
        >
          &#xe65c;
        </span>
        <span className="title">云音悦</span>
        <span
          className="iconfont search"
          onClick={() => navigate("/search")}
        >
          &#xe62b;
        </span>
      </Top>
      <Tab>
        <NavLink to="/recommend">
          <TabItem>
            <span>推荐</span>
          </TabItem>
        </NavLink>
        <NavLink to="/singers">
          <TabItem>
            <span>歌手</span>
          </TabItem>
        </NavLink>
        <NavLink to="/rank">
          <TabItem>
            <span>排行榜</span>
          </TabItem>
        </NavLink>
      </Tab>
      <RouterConfig/>

    </div>
  )
}

// connect 是api
// 组件数据管理功能被收回
// state 是 redux 负责的所有子仓数据
// 组件通过connect连上store store 未来去管理数据
// redux 让数据管理更科学 开发工艺
// redux 就是数据管理学
// 把store中的状态以props的形式引到组件中去
// state 由 redux 给我们的  state 是状态树
// 以树来组织我们的数据 state 根

export default App
